<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>分类管理-新浪新闻-后台管理系统-1.0</title>
	<meta name="Description" content="基于layUI数据表格操作" />
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../../static/css/font.css">
	<link rel="stylesheet" href="../../static/css/weadmin.css">
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	<style type="text/css">
		.layui-form-switch {
			width: 55px;
		}

		.layui-form-switch em {
			width: 40px;
		}

		body {
			overflow-y: scroll;
		}
	</style>
</head>

<body>
	<div class="weadmin-body">
		<div class="weadmin-block">
			<button class="layui-btn" id="addBtn">
				<i class="layui-icon layui-icon-add-circle-fine"></i>添加
			</button>
		</div>
		<table id="myTable" lay-filter="member"></table>
		<script type="text/html" id="bar">
			<div class="layui-clear-space">
				<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
				<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
			</div>
    	</script>
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		<script>
			layui.use(['jquery', 'table'], function () {
				var table = layui.table;
				var $ = layui.$
				//第一个实例
				table.render({
					elem: '#myTable'
					, even: true
					, page: true
					, limit: 5
					, limits: [5, 10, 20, 30, 50, 100]
					, url: '../../json/category.json'
					, parseData: function (data) {
						return {
							"code": data.status, // 解析接口状态
							"msg": data.message, // 解析提示文本
							"count": data.total, // 解析数据长度
							"data": data.data.item // 解析数据列表
						}
					}
					, defaultToolbar: []
					, cols: [[ //表头
						{ field: 'id', title: 'id', width: 80, sort: true, fixed: 'left' }
						, { field: 'category', title: '分类名称', width: 140 }
						, { field: 'createTime', title: '创建时间' }
						, { field: 'changeTime', title: '修改时间' }
						, { field: 'right', title: '操作', width: 100, minWidth: 125, toolbar: '#bar', fixed: 'right' }
					]]
				});
				table.on('tool(member)', function (res) {
					if (res.event === 'edit') {
						layer.open({
							// title: '编辑 - id:' + data.id,
							type: 2,
							maxmin:true,
							content: './category-add.html?data=' + res.data.id,
							area: ['98%', '98%'],
							btn: ['修改', '取消'],
							btn1: function (index, layero) {
								// console.log('改不了一点!!!');
								layer.msg('修改成功', { icon: 1, time: 1000 });
								layer.close(index);
							},
						});
					}
					if (res.event === 'delete') {
						layer.confirm('你确定要删除吗？', { icon: 3 }, function (index) {
							res.del();
							layer.close(index)
							// 正确逻辑是在此调用ajax
							/*
								ajax
								在ajax回调中弹窗
	
							*/
							layer.msg('删除成功', { icon: 1, time: 1000 });
						});
					}
				})
				$('#addBtn').on('click', function () {
					layer.open({
						title: '添加',
						type: 2,
						maxmin:true,
						content: './category-add.html',
						area: ['98%', '98%'],
						btn: ['确定', '取消'],
						btn1: function (index, layero) {
							layero.find('iframe').contents().find('#add').click();

						},
					});
				})
			})
			function submit(data) {
				// console.log(data);
				layer.closeAll();
				layer.msg(JSON.stringify(data));
			}
		</script>
	</div>
</body>

</html>